<template>
  <Container class="export-list">
    <div class="container-header" slot="header">
      <Button size="large" class="fl btn-back mr10"  icon="ios-arrow-back" @click="$router.back()">返回</Button>
    </div>
    <Tabs v-model="tab">
      <Button 
      size="large" 
      class="item"
      slot="extra"
      icon="refresh"
      @click="getData">刷新列表</Button>
      <Button 
        slot="extra" 
        type="primary"
        size="large"
        icon="ios-trash"
        class="mr"
        @click="onBatchDelete">批量删除</Button>
      <TabPane label="导出列表" name="tab1">
        <Table 
          :height="options.tableHeight" 
          stripe
          :columns="list.columns" 
          :data="list.data"
          @on-selection-change="onSelectChange"
          no-data-text="亲，没有找到相关记录哦！~"></Table>
        <div class="pager">
            <Page 
            :total="list.totalItem" 
            :current="list.currentPage"
            :page-size="list.pageSize"
            @on-change="onPageChange"
            @on-page-size-change="onPageSizeChange"
            show-sizer 
            placement="top"></Page>
        </div>
        <Loader :status="list.status" @refresh="getData"></Loader>
      </TabPane>
    </Tabs>
  </Container>
</template>
<script>
import table from '@/table'
import { preFixPath } from '@/util'
import exportListData from './list/ExportListData'
export default {
  data() {
    return {
      list: exportListData,
      tab: 'tab1',
      ids: [],
      options: {
        tableHeight: 300
      }
    }
  },
  mounted() {
    this.list.currentPage = ~~this.$route.query.currentPage || 1
    this.list.pageSize = ~~this.$route.query.pageSize || this.list.pageSize
    this.initTable()
    this.$bus.$on('downloadExcel', this.downloadExcel)
    this.$bus.$on('onDelete', this.onDelete)
    this.$bus.$on('changeState', ({ data, key }) =>{
      if(data[0] == 6) {
        this.list.downloadType = 6
      } else if(data[0] == 2) {
        this.list.downloadType = 2
      } else if(data[0] == 3) {
        this.list.downloadType = 3
      } else if(data[0] == 1) {
        this.list.downloadType = 1
      } else if(data[0] == 4) {
        this.list.downloadType = 4
      } else if(data[0] == 5) {
        this.list.downloadType = 5
      } else if(data[0] == 7) {
        this.list.downloadType = 7
      } else if(data[0] == 8) {
        this.list.downloadType = 8
      } else if(data[0] == 9) {
        this.list.downloadType = 9
      } else if(data[0] == 53) {
        this.list.downloadType = 53
      } else if(data[0] == 48) {
        this.list.downloadType = 48
      } else if(data[0] == 50) {
        this.list.downloadType = 50
      } else if(data[0] == 82) {
        this.list.downloadType = 82
      } else if(data[0] == 84) {
        this.list.downloadType = 84
      } else if(data[0] == 86) {
        this.list.downloadType = 86
      } else {
        this.list.downloadType = null
      }
      this.list.currentPage = 1
      this.getData()
    })
    this.getData()
  },
  destroyed() {
    this.$bus.$off()
  },
  methods: {
    ...table,
    getData() {
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize
      }
      this.list.status = 'loading'
      if (this.list.downloadType) param.downloadType = this.list.downloadType
      this.$jsonPost('/download/page', param).then(data => {
        this.list.data = (data.records || []).map(item => {
          return {
            id: item.id,
            createDate: item.createDate,
            operatorName: item.operatorName,
            fileUrl: item.fileUrl,
            downloadTypeName: item.downloadTypeName,
            status: item.status
          }
        })
        this.list.totalItem = Number(data.total)
        this.backTableTop()
        this.list.status = 'pass'
      }).catch(() => {
        this.list.status = 'error'
      })
    },
    downloadExcel(url) {
      window.location.href = preFixPath + url
    },
    onDelete(id) {
      let param = {
        ids: id
      }
      this.delCoper(param)
    },
    delCoper(param) {
      this.$Modal.confirm({
        title: '删除',
        content: '确定删除所选的列表？',
        onOk: () => {
          this.$ajaxPost('/download/delete_by_ids', param).then(() => {
            this.$Notice.success({
              title: '删除成功'
            })
            this.getData()
          })
        }
      })
    },
    onBatchDelete() {
      if (this.ids.length == 0) {
        this.$Message.error('请选择要删除的列表')
        return
      }
      let param = {
        ids: this.ids
      }
      this.delCoper(param)
    },
    onSelectChange(selection) {
      this.ids = selection.map(item => item.id)
    },
    onPageChange(number) {
      this.list.currentPage = number
      this.getData()
      this.$router.push({
        name: 'home/export/list',
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      })
    },
    onPageSizeChange(pageSize) {
      this.list.currentPage = 1
      this.list.pageSize = pageSize
      this.getData()
      this.$router.push({
        name: 'home/export/list',
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      })
    }
  },
  watch: {
    $route() {
      let page = ~~this.$route.query.currentPage
      let table = this.list
      if (table.currentPage !== page) {
        table.currentPage = ~~this.$route.query.currentPage === 0 ? 1 : ~~this.$route.query.currentPage
        this.getData()
      }
    }
  }
}
</script>